import { useRef } from "react";

/*
  非受控组件：以 ref 方式收集表单数据（不推荐）
*/
export default function App() {
  // 1. 定义 ref 数据
  const usernameRef = useRef(null);
  const passwordRef = useRef(null);

  const login = (e) => {
    e.preventDefault(); // 阻止默认行为

    console.log(usernameRef.current.value);
    console.log(passwordRef.current.value);
  };

  return (
    <form onSubmit={login}>
      <h1>登录</h1>
      {/* 2. 给元素绑定ref属性 */}
      <div>
        用户名：
        <input type="text" ref={usernameRef} />
      </div>
      <div>
        密码：
        <input type="password" ref={passwordRef} />
      </div>
      {/* <button onClick={login}>登录</button> */}
      <button>登录</button>
    </form>
  );
}
